<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<title>Mobilebone.js API文档-data-callbackKeys</title>
<link rel="stylesheet" href="../src/mobilebone.css">
<link rel="stylesheet" href="docs.css">
</head>

<body>
<aside></aside>
<div class="page out">
	<div class="content">
    	<h2>data-callbackKeys</h2>
        <p>这里的<code>callbackKeys</code>只是一种统称，实际没有这个自定义属性的，指的是一系列回调写法，因为除了长相不一样，其他都类似，所以合在一起讲了。</p>
        <p>其家庭成员包括：</p>
        <ul>
        	<li><code>data-onpagefirstinto</code> 页面第一次载入执行，过场刚开始即执行。
                <p>语法：</p>
                <pre>onpagefirstinto(pageInto, pageOut, options)</pre>
                <p>其中<code>pageInto</code>表示进入的页面的DOM，<code>pageOut</code>表示离开的页面的DOM，<code>options</code>为可选参数，具体：</p>
                <ul>
                    <li><strong>options.response</strong> 返回的数据。这个参数多半应用在Ajax请求时候。</li>
                    <li><strong>options.target</strong> （触发过场）点击的页面元素。</li>
                    <li><strong>options.id</strong> 页面标示<code>id</code>, 一般仅在<code>url</code>请求时候存在。</li>
                    <li><strong>options.history</strong> 是否在浏览历史中添加一条记录。此属性大可不必关心。</li>
                    <li><strong>options.remove</strong> 是否删除同<code>id</code>的页面。此属性大可不必关心。</li>
                </ul>
            </li>
        	<li><code>data-callback</code> 页面每次进入都会执行，过场刚开始即执行。<p>语法：</p><pre>callback(pageInto, pageOut, options)</pre></li>
            <li><code>data-fallback</code> 页面每次离开都会执行，过场刚开始即执行。<p>语法：</p><pre>fallback(pageInto, pageOut, options)</pre></li>
            <li><code>data-animationstart</code> 页面动画即将开始执行的回调，离开页面，进入页面均会触发。<p>语法：</p><pre>animationstart(page, intoOrOut, options)</pre></li>
            <li><code>data-animationend</code> 页面动画结束之后执行的回调，离开页面，进入页面均会触发。<p>语法：</p><pre>animationend(page, intoOrOut, options)</pre></li>
            <li><code>data-preventdefault</code> 介入回调，可以用来中断Mobilebone的一些默认行为，可以过场等行为触发之前实现一些自定义行为。<p>语法：</p><pre>preventdefault(aOrForm)</pre><p>当返回值为<code>true</code>的时候会阻断Mobilebone的一些默认行为。</p></li>
        </ul>
        <p>每个回调的作用于使用场景可参见博文说明：<a href="http://www.zhangxinxu.com/wordpress/2014/10/mobilebone-js-mobile-web-app-core/" class="link">点击这里</a>。</p>
        <p>其中，<code>data-preventdefault</code>并非<code>page</code>元素专有，<code>a</code>元素，<code>form</code>元素也支持此回调，具体可<a href="data-preventDefault.html" class="link">点击这里</a>。</p>
        <h3>其他说明</h3>
        <p><code>data-ajaxKeys</code>也是类似的集合API。</p>
        <h3>补充说明(<time>2015-04-15</time>)</h3>
        <p>有很多人问过静态页面间传参的问题。由于是单页，因此，可以设置个全局对象，专门负责参数传递，但是，有些人就是不想走全局对象传参，怎么办？</p>
        <p>是这样的，如果你是点击<code>&lt;a&gt;</code>元素触发的过场，则所有的回调函数中的<code>options</code>这个参数（是个纯对象）中会有一个target属性，其值就是我们之前点击的<code>&lt;a&gt;</code>元素，于是，你就可以获得你想要的参数了。例如：</p>
        <pre>&lt;a href="load.html?id=111">页面111&lt;/a></pre>
        <p>111可能是你想传递的参数，然后，就可以通过下面一行脚本获得：</p>
        <pre>var id = options.target.href.replace(/\D/g, "");</pre>
        <h3>补充于2015-05-30(v2.5.8)</h3>
        <p>尤其当使用<code>data-callback</code>和<code>data-fallback</code>处理一些回调的时候，有可能前后两个页面结构一致，数据不一样，就很有可能出现<code>id</code>一致的情况，如果单纯使用<code>$("#ID")</code>或<code>document.querySelector("#ID")</code>, 则得到的元素并不是新页面你希望选择的元素。怎么办，请使用回调方法中的页面参数作为容器去获取对应的元素，例如：</p>
        <pre>Mobilebone.callback = function(<span style="color:#cd0000;">pagein</span>) {
    <del style="color:green;">// NOT: var element = document.querySelector("#ID");</del>
    var element = <span style="color:#cd0000;">pagein</span>.querySelector("#ID");
    <span style="color:green;">// do sth by using elememt...</span>
};</pre>
    </div>
</div>

<script src="../src/mobilebone.js"></script>
<script>
Mobilebone.captureLink = false;
window.navKey = "data-callbackKeys";
</script>
<script src="nav.js"></script>
<script src="docs.js"></script>
</body>
</html>
